<template>
  <view>
    <view class="topbg">
      <u-tabs :list="tabs" :current="current" bg-color="transparent" inactive-color="#fff" active-color="#fff"
        @change="change"></u-tabs>
        
        <view style="height: 300rpx;"></view>
        <view class="ban"></view>
    </view>
    
    <u-gap height="64"></u-gap>
    <view class="u-p-24">
      <view class="qiang" v-for="i in 8" :key="i">
        <image src="https://picsum.photos/id/667/200/200" class="pic" mode=""></image>
        <view class="info">
          <view class="title">日式缤纷糖果色多用腰靠枕</view>
          <view class="flex-row align-center u-line-1" style="height: 72rpx;">
            <u-tag class="u-m-r-8" text="雪月夜" mode="plain" size="mini" type="success" />
            <u-tag class="u-m-r-8" text="雪月夜" mode="plain" size="mini" type="success" />
            <u-tag class="u-m-r-8" text="雪月夜" mode="plain" size="mini" type="success" />
          </view>
          <view class="flex-row justify-between align-end u-line-1" style="width: 380rpx;">
            <view class="price">￥299</view>
            <view class="count">已抢3434件</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          },
          {
            name: '推荐'
          },
          {
            name: '男装'
          }, {
            name: '推荐'
          },
          {
            name: '男装'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
        this.getData(true);
      },
    }
  }
</script>

<style lang="scss">
  .topbg {
    background: linear-gradient(90deg, #fc8e53 0%, #fa9b72 100%);
    position: relative;
    
    .ban {
      width: 712rpx;
      height: 350rpx;
      background: pink;
      border-radius: 8rpx;
      overflow: hidden;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 64rpx);
    }
  }
  
  .qiang {
    width: 712rpx;
    height: 210rpx;
    padding: 0 24rpx;
    border-radius: 8rpx;
    overflow: hidden;
    margin-bottom: 24rpx;
    background: url(../../static/images/qiangbj.png) no-repeat center / cover;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .pic {
      width: 160rpx;
      height: 160rpx;
      object-fit: cover;
    }
    
    .info {
      width: 480rpx;
      height: 160rpx;
    }
    
    .price {
      font-size: 36rpx;
      color: #FF4500;
    }
    
    .count {
      font-size: 24rpx;
      color: #C3C3C3;
    }
  }
</style>
